Vue.directive('autoComplete', {
    deep: true,
    twoWay: true,
    params: ['autoCompleteParam'],

    bind: function() {
        var param = this.params.autoCompleteParam,
            elem = $(this.el);
        function show() {
            var offset = elem.offset();
            param.style.left = offset.left + 'px';
            param.style.top = offset.top + elem.outerHeight() + 'px';
            param.style.display = 'block';
        }
        var ajaxParam = $.extend({}, param.ajaxParam);
        if (!ajaxParam.data) {
            ajaxParam.data = {};
        }
        var success = ajaxParam.success;
        ajaxParam.success = function (data) {
            if (typeof success === 'function') {
                var _data = success(data);
                if (typeof _data !== undefined) {
                    data = _data;
                }
            }
            param.resultList = data;
            if (data.length) {
                Vue.set(param, 'highlightedIndex', 0);
                show();
            } else {
                param.style.display = 'none';
            }
            
        }
        var self = this;
        $(this.el).on('focus', function () {
            if (this.value === '') {
                return;
            }
            if (param.resultList.length === 0) {
                if (typeof ajaxParam.data === 'function') {
                    ajaxParam.data = ajaxParam.data(this.value);
                } else {
                    ajaxParam.data[param.queryName] = this.value;
                }
                if (window.autoCompleteAjax && window.autoCompleteAjax.abort) {
                    window.autoCompleteAjax.abort();
                }                
                window.autoCompleteAjax = $.ajax(ajaxParam);
            }
            show();
        }).on('keyup', function (e) {
            var data = param.resultList;
            if (e.keyCode === 40) { // 向下箭头
                if (data.length < 2) {
                    return;
                }
                var index = param.highlightedIndex;
                index++;
                if (index === data.length) {
                    index = 0;
                }
                param.highlightedIndex = index;
                return;
            } else if (e.keyCode === 38) { // 向上箭头
                if (data.length < 2) {
                    return;
                }
                var index = param.highlightedIndex;
                index--;
                if (index < 0) {
                    index += data.length;
                }
                param.highlightedIndex = index;
                return;
            } else if (e.keyCode === 13) { // 回车
                this.value = param.onselect(param.resultList[param.highlightedIndex]) || '';
                return;
            }
            if (this.value === '') {
                param.style.display = 'none';
                return;
            }
            var ajaxParam = $.extend({}, param.ajaxParam);
            if (typeof ajaxParam.data === 'function') {
                ajaxParam.data = ajaxParam.data(this.value);
            } else {
                ajaxParam.data[param.queryName] = this.value;
            }
            var success = ajaxParam.success;
            ajaxParam.success = function (data) {
                if (typeof success === 'function') {
                    var _data = success(data);
                    if (typeof _data !== undefined) {
                        data = _data;
                    }
                }
                param.resultList = data;
                if (data.length) {
                    Vue.set(param, 'highlightedIndex', 0);
                    show();
                } else {
                    param.style.display = 'none';
                }
            }
            if (window.autoCompleteAjax && window.autoCompleteAjax.abort) {
                window.autoCompleteAjax.abort();
            }
            window.autoCompleteAjax = $.ajax(ajaxParam);
        }).on('blur', function () {
            this.value = param.onselect(param.resultList[param.highlightedIndex]);
        });

        function setAjaxParam() {
            
        }

        $(document).on('click', function (e) {
            if (e.target !== self.el) {
                Vue.set(param.style, 'display', 'none');
            }
        });
    },
    update: function(value) {
        if (value) {
            $(this.el).val(value.UserName);
        }
    },
    unbind: function() {
        $(this.el).off().select2('destroy');
    }
});